import { View, Image } from '@tarojs/components';
import Title from '@/components/Title/index';
import Taro from '@tarojs/taro';
import serviceBg1 from '@/assets/images/home/service1.png';
import serviceBg2 from '@/assets/images/home/service2.png';
import './index.scss';

export default function () {
  const list = [
    {
      imageUrl: serviceBg1,
      name: '预约上门',
      desc: '您身边的护理专家',
      id: 1,
    },
    {
      imageUrl: serviceBg2,
      name: '到店服务',
      desc: '不仅是温暖还有趣',
      id: 2,
    },
  ];
  const goPage = (id: number) => {
    let path = '/subPages/service/list/index';
    if (id === 2) {
      path = '/subPages/service/search/index';
    }
    Taro.navigateTo({
      url: path,
    });
  };
  return (
    <View className="home-service">
      <Title title="服务在线" subTitle="/  一刻钟生活服务圈" />
      <View className="service-list">
        {list.map((goods) => {
          return (
            <View className="service-item" key={goods.id} onClick={() => goPage(goods.id)}>
              <Image className="service-image" src={goods.imageUrl} />
              <View className="service-title">{goods.name}</View>
              <View className="service-price">{goods.desc}</View>
            </View>
          );
        })}
      </View>
    </View>
  );
}
